<template>
	<div>
		<table border="">
			<tr v-for="(item, index) in method" :key="index">
				<th>{{ item.a }}</th>
				<th>{{ item.b }}</th>
				<th>{{ item.c }}</th>
				<th>{{ item.d }}</th>
				<th>{{ item.e }}</th>
				<th>{{ item.f }}</th>
				<th>{{ item.g }}</th>
			</tr>
			<tr v-for="(item, index) in ARR" :key="index">
				<td>{{ item.name }}</td>
				<td>{{ item.methods }}</td>
				<td>{{ item.effect }}</td>
				<td>{{ item.prop }}</td>
				<td>{{ item.call }}</td>
				<td>{{ item.differentia }}</td>
				<td>{{ item.same }}</td>
			</tr>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			method: [
				{
					a: '类别',
					b: '方法',
					c: '作用',
					d: '属性',
					e: '返回值',
					f: '不同',
					g: '相同',
				},
			],
			ARR: [
				{
					name: 'Array',
					// 方法
					methods: `arr.push()`,
					// 作用
					effect: ` 从后面添加一个或多个`,
					//属性
					prop: '添加的项',
					// 返回值。
					call: '并将新数组及个数作为返回值返回。改变原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.pop()`,
					// 作用
					effect: ` 从后面删除一个`,
					//属性
					prop: '',
					// 返回值。
					call: '将删除的数组项返回回来',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.unshift()`,
					// 作用
					effect: ` 从数组前面添加一个或多个数组项`,
					//属性
					prop: '',
					// 返回值。
					call: '并将新数组及数量返回',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.shift() `,
					// 作用
					effect: `  从前面删除一个`,
					//属性
					prop: '',
					// 返回值。
					call: '并将删除的数组项返回',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.unshift()`,
					// 作用
					effect: ` 从数组前面添加一个或多个数组项`,
					//属性
					prop: '',
					// 返回值。
					call: '并将新数组及数量返回',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.concat()`,
					// 作用
					effect: ` 合并数组`,
					//属性
					prop: 'arr1,aar2',
					// 返回值。
					call: '返回新数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.slice() `,
					// 作用
					effect: ` 合并数组`,
					//属性
					prop: `1.开始的索引， 2.结束索引，`,
					// 返回值。
					call: '截取数组返回选定的元素,不会改变原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.splice()  `,
					// 作用
					effect: ` 替换`,
					//属性
					prop: `1.值开始索引
                2.删除的个数/数量
                3.向数组中添加新的元素
                `,
					// 返回值。
					call: '将被删除的元素作为返回值返回，改变原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.join() `,
					// 作用
					effect: ` 分割数组`,
					//属性
					prop: `以什么分割 不写就是一个字符串
                
          `,
					// 返回值。
					call: '返回字符串，不改变原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.reverse()`,
					// 作用
					effect: ` 翻转数组`,
					//属性
					prop: `以什么分割 不写就是一个字符串
                
          `,
					// 返回值。
					call: '返回改变后的数组 改变原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.sort()`,
					// 作用
					effect: ` 数组排序`,
					//属性
					prop: `callback(a,b)`,
					// 返回值。
					call: '返回排序完的数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.toString()`,
					// 作用
					effect: ` 转换成字符串，类似于没有参数的join()`,
					//属性
					prop: ``,
					// 返回值。
					call: '返回字符串',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.indexOf()`,
					// 作用
					effect: ` 查询在数组中出现的位置`,
					//属性
					prop: ` 要查询的项`,
					// 返回值。
					call: '存在返回下标，不存在返回-1 不影响原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.lastIndexOf()`,
					// 作用
					effect: ` 查询在数组中出现的位置`,
					//属性
					prop: ` 要查询的项`,
					// 返回值。
					call: '存在返回下标，不存在返回-1 不影响原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `Array.from()`,
					// 作用
					effect: ` 类似数组转成数组`,
					//属性
					prop: ` 1.序列  2.类似于map函数`,
					// 返回值。
					call: '返回处理完的数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `Array.fo()`,
					// 作用
					effect: ` 把一组值 转成数组`,
					//属性
					prop: ` 值 必须大于等于2个  只有一个值是数组的长度`,
					// 返回值。
					call: '返回新数组  没有值就返回空数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.copyWithin()`,
					// 作用
					effect: ` 截取指定位置元素替换到其他位置`,
					//属性
					prop: `1.替换位置 2. 开始索引 3.结束索引`,
					// 返回值。
					call: '返回替换完的数组  修改当前数组。',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},

				{
					name: '',
					// 方法
					methods: `arr.forEach()`,
					// 作用
					effect: ` 遍历数组没一项`,
					//属性
					prop: ` callback(v,i,arr)`,
					// 返回值。
					call: '没有返回值',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.find()`,
					// 作用
					effect: ` 查找数组中的元素 `,
					//属性
					prop: `查找元素`,
					// 返回值。
					call: '返回第一个符合条件的结果，没有则返回undefined',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.findindex()`,
					// 作用
					effect: ` 查找数组中的元素 `,
					//属性
					prop: `查找元素`,
					// 返回值。
					call: '返回第一个符合条件结果的索引，没有则返回-1',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr.keys()`,
					// 作用
					effect: ` 获取键 / 下标 `,
					//属性
					prop: `数组`,
					// 返回值。
					call: '返回一个键的集合',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},

				{
					name: '',
					// 方法
					methods: `arr.value()`,
					// 作用
					effect: ` 获取值 `,
					//属性
					prop: `数组`,
					// 返回值。
					call: '返回一个值的集合',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},

				{
					name: '',
					// 方法
					methods: `arr.includes(tag,index) `,
					// 作用
					effect: `查找元素`,
					//属性
					prop: `元素，下标`,
					// 返回值。
					call: '返回布尔值',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},

				{
					name: '',
					// 方法
					methods: `arr.fill() `,
					// 作用
					effect: `填充数组`,
					//属性
					prop: `填充的值`,
					// 返回值。
					call: '返回新数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr. flat() `,
					// 作用
					effect: `拉平数组`,
					//属性
					prop: `拉平数层数`,
					// 返回值。
					call: '返回拉平完之后的数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr. flatMap() `,
					// 作用
					effect: `原数组的每个成员执行一个函数`,
					//属性
					prop: `方法返回一个新数组，不改变原数组。`,
					// 返回值。
					call: '返回拉平完之后的数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr. some() `,
					// 作用
					effect: `查找元素`,
					//属性
					prop: ``,
					// 返回值。
					call: '布尔值',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
				{
					name: '',
					// 方法
					methods: `arr. map() `,
					// 作用
					effect: `遍历数组，并对数组里每一个元素进行操作`,
					//属性
					prop: ` callback(v,i,arr)`,
					// 返回值。
					call: '返回新数组 不改边原数组',
					// 不同
					differentia: '',
					// 相同
					same: '',
				},
			],
		}
	},
}
</script>

<style scoped>
table {
	width: 1200px;
	margin: 0 auto;
	border-collapse: collapse;
}
table > tr {
	text-align: center;
}
table > tr > td:first-child {
	width: 240px;
}
table > tr > th {
	background: yellow;
	height: 40px;
}
</style>